<template>
    <div class="form-control">
        <input 
        :value="localValue"
        @input="updateValue"
        class="input input-alt" 
        placeholder="发个友善的弹幕" 
        required="" 
        type="text">
        <span class="input-border input-border-alt"></span>
    </div>
</template>

<script setup>
// ========================= 接收值 =========================
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
});

// ========================= 计算属性 =========================
const localValue = computed({
    get(){
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    }
});

// ========================= 发送给父组件的方法 =========================
const emit = defineEmits();
function updateValue(event) {
    emit('update:modelValue', event.target.value);
};
</script>

<style lang="scss" scoped>
    @import './message-input.scss';
</style>
